<template>
  <section class="cart_module">
    <section v-if="foods.specfoods.length == 1" class="cart_button">
      <transition name="showReduce">
        <span
          @click="reduceFood(foods.category_id, foods.item_id, foods.specfoods[0].food_id,$event)"
          v-if="foodNum"
        >
          <svg>
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
          </svg>
        </span>
      </transition>
      <transition name="fade">
        <span class="cart_num down-fixed"  v-if="foodNum">{{ foodNum }}</span>
      </transition>
      <svg
        class="add_icon"
        @click="
          addFood(
            foods.category_id,
            foods.item_id,
            foods.specfoods[0].food_id,
            foods.specfoods[0].name,
            foods.specfoods[0].price,
            '',
            foods.specfoods[0].packing_fee,
            foods.specfoods[0].sku_id,
            foods.specfoods[0].stock,
            $event
          )
        "
      >
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use>
      </svg>
    </section>
    <section v-else class="choose_specification">
      <section class="choose_icon_container">
        <transition name="showReduce">
          <svg class="specs_reduce_icon" v-if="foodNum" @click="reduceMut">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use>
          </svg>
        </transition>
        <transition name="fade">
          <span class="cart_num" v-if="foodNum">{{ foodNum }}</span>
        </transition>
        <span class="show_chooselist" @click="mutClick">选规格</span>
      </section>
    </section>
  </section>
</template>

<script lang="ts">
export default {
  name: "BuyIcon",
};
</script>
<script lang="ts" setup>
import { ref, reactive, toRefs, PropType, computed } from "vue";
import { Food, Food_id } from "@/type/index";
import { shop } from "@/store/index";
import { storeToRefs } from "pinia";
const store = shop();
const { cartList } = storeToRefs(store);
const props = defineProps({
  foods: {
    type: Object as PropType<Food>,
  },
  shopId: {
    type: String,
  },
});
const emit = defineEmits(['mutClick','reduceMut'])
//添加的数量
const { foods, shopId } = toRefs(props);
const foodNum = computed(() => {
  let sum = 0;
  let category_id = foods.value.category_id;
  let item_id = foods.value.item_id;
  const shopCart = cartList.value[shopId.value];
  if (shopCart && shopCart[category_id] && shopCart[category_id][item_id]) {
    Object.values(shopCart[category_id][item_id]).forEach((item: Food_id) => {
      if (item) {
        sum = sum + item.num;
      }
    });
  }
  return sum;
});
//添加
const addFood = (
  category_id: number,
  item_id: number,
  food_id: number,
  name: string,
  price: number,
  specs: string,
  packing_fee: number,
  sku_id: number,
  stock: number,
  e:Event
) => {
  e.stopPropagation()
  store.addCart(
    shopId.value,
    category_id,
    item_id,
    food_id,
    name,
    price,
    specs,
    packing_fee,
    sku_id,
    stock
  );
};
//去除
const reduceFood = (category_id: number, item_id: number, food_id: number ,event:Event) => {
  event.stopPropagation()
  store.reduceCart(shopId.value, category_id, item_id, food_id);
};
const mutClick = (e:Event) => {
  e.stopPropagation()
  emit('mutClick',foods.value)
};
const reduceMut = (e:Event) => {
  e.stopPropagation()
  emit('reduceMut')
}
</script>
<style lang="scss" scoped>
@import "@/assets/scss/mixin.scss";
.cart_module {
  .add_icon {
    position: relative;
    z-index: 6;
  }
  .cart_button {
    display: flex;
    align-items: center;
    span {
      @include wh(0.6rem, 0.6rem);
    }
    svg {
      @include wh(0.6rem, 0.6rem);
      fill: #3190e8;
    }
  }

  .specs_reduce_icon {
    fill: #999;
    @include wh(0.6rem,0.6rem);
    transform: translateY(0.04rem);
  }
  .cart_num {
    @include sc(0.4rem, #666);
    min-width: 0.7rem;
    text-align: center;
    font-family: Helvetica Neue, Tahoma;
    display: inline-block;
  }
  .down-fixed{
    transform: translateY(0.05rem);
  }
  .choose_specification {
    .choose_icon_container {
      display: flex;
      align-items: center;
      .show_chooselist {
        display: block;
        @include sc(0.3rem, #fff);
        padding: 0.1rem 0.15rem;
        background-color: $blue;
        border-radius: 0.2rem;
        border: 1px solid $blue;
      }
    }
  }
}
.showReduce-enter-active,
.showReduce-leave-active {
  transition: all 0.3s ease-out;
}
.showReduce-enter-from,
.showReduce-leave-active {
  opacity: 0;
  transform: translateX(1rem);
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}
.fade-enter-from,
.fade-leave-active {
  opacity: 0;
}
.fadeBounce-enter-active,
.fadeBounce-leave-active {
  transition: all 0.3s;
}
.fadeBounce-enter-from,
.fadeBounce-leave-active {
  opacity: 0;
  transform: scale(0.7);
}
</style>
